<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{ width:100px; height:50px; background:red; margin-top:50px;}
    </style>
</head>
<body>
<script>
    window.onload = function(){
        var oDiv = document.getElementsByTagName('div');
//        alert(oDiv.length);

        for(var i=0; i<oDiv.length; i++) {
            oDiv[i].timer = null;

            oDiv[i].onmouseover = function() {
                startMove(this, 300);
            };
            oDiv[i].onmouseout  = function() {
                startMove(this, 100);
            };
        }

    };
//    var timer = null;
    function startMove(obj, iTarget) {
//        var oDiv = document.getElementById('div1');
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var iSpeed = (iTarget-obj.offsetWidth)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
            if(obj.offsetWidth == iTarget) {
                clearInterval(obj.timer);
            }else {
                obj.style.width = obj.offsetWidth + iSpeed + 'px';
            }
        },30);
    }
</script>
<div></div>
<div></div>
<div></div>
</body>
</html>